<template>
  <!--  有下划线有备注详情模型 -->
  <div class="eChartsType" >
    <div class="content">
      <div class="header">
        <p class="title">{{pageItem.title}}</p>
        <el-tooltip :content="pageItem.describes" placement="top">
          <i class="iconfont iconshuoming cursor-pointer"></i>
        </el-tooltip>
      </div>
      <div class="center">
        <span class="icon">
            $
          </span>
        <div class="center-left">
          <p><span class="font_50 blueColor">1,444</span><span>元/吨</span></p>
        </div>

      </div>
      <div class="bottom">
        {{pageItem.varString }}
        <!--<p class="statistics">-->
        <!--<span class="top_s">环比 12%</span>-->
        <!--<span class="bottom_s">同比 15.36%</span>-->
        <!--</p>-->
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'eChartsType',
    props: {
      pageItem: {
        type: Object
      }
    }
  }
</script>

<style scoped lang="scss">
  .eChartsType{
    height:100%;
    width:100%;
    .content{
      .title{
        text-align: right;
      }
    }
    .center{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

</style>
